.header {
    /* flex 是非常重要的一个布局方式，后面很多样式都基于flex*/
    display: flex;
    /* 按中心对齐所有元素*/
    align-items: center;
    /* 将所有的子div分区 均匀放置在div内*/
    justify-content: space-between;
    /* 将所有元素与边界分开 */
    padding: 20px;
    /* 将header 置顶*/
    position: sticky;
    top:0;
    /* 将header置于其他元素上方 */
    z-index:100;
    /* 使用背景色，防止其他元素穿透 */
    background-color:white;


}

.header__logo {

    /* 将图片大小调整到合适的尺寸 */
    height: 25px;

    /* 确保图片不会变形，尤其是png， jpg的时候，svg可以不需要*/
    object-fit:contain;
    /* 将logo 与icon分开一点 */
    padding-left: 20px;
}

.header__input {
    display: flex;
    align-items:center;
    width: 40%;
    border: 1px solid black;
}

.header__inputButton {
    width: 50px  !important;
    background-color: #fafafa;
    color: grey;
    border-left: 1px solid black;
}

.header__icons {
    display: flex;
    align-items: center;
}

.header__input > input {
    /* 该元素在flex布局下，会占用尽可能多的空间 */
    flex: 1;
    /* 不显示边框 */
    border: none;

}

.header__icon{
    margin-right:15px;
}